<!doctype html>
<html lang="en-US">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!--<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="expires" content="0" />-->
    <meta name="keywords" content="vtb-music, vtb, vtb
 Music website">
    <meta name="description" content="A music website for collecting VTuber songs.">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="main.css">
	<script type="text/javascript">
		function check_mobile(){
			if('ontouchstart' in window) return true;
			else return false
		}
		if(check_mobile()){
			let tmp = './index-mobile_en.html';
			if(window.location.href.indexOf('?') != -1)
				tmp += window.location.href.substring(window.location.href.indexOf('?'));
			window.location.href = tmp;
		}
	</script>
    <title>Vtb-Music</title>
	</head>
	<body>
		<audio id="player" preload="auto">
  			<source type="audio/mpeg">
			Sorry, please upgrade your browser
		</audio>
		<div id="info" class="info">
			<span id="info-text">Loading</span>
		</div>
		<div id="nav" class="nav-player">
			<div style="width: 30%; height: 100%; display: inline-block;text-align: center;">
				<div class="nav-btns">
					<a class="nav-btn nav-btn-play-random" id="btn-nav-random"></a>
					<a class="nav-btn nav-btn-pre" id="btn-nav-pre"></a>
					<a class="nav-btn nav-btn-play" id="btn-nav-play"></a>
					<a class="nav-btn nav-btn-nxt" id="btn-nav-nxt"></a>
					<a class="nav-btn nav-btn-play-repeat" id="btn-nav-repeat"></a>
					
				</div>
			</div>
			<div style="width: 40%; height: 100%; display: inline-block; text-align: center">
				<div class="nav-music-card">
					<div class="nav-music-head">
						<div class="nav-music-card-img" id="nav-music-card-img"></div>
					</div>
					<div class="nav-music-card-body" id="nav-music-card-body">
						<div id="nav-text" class="nav-text">
							<div id="scoller-body">
								<div id="nav-music-card-scoller" class="nav-music-card-scoller">
									<div class="nav-music-card-title" id="nav-music-card-title">Vtb-Music</div>
								</div>
							</div>
							<div class="nav-music-card-subtitle" id="nav-music-card-subtitle">...</div>
						</div>
						<div class="nav-play-bar-bg" id="nav-play-bar-bg"></div>
						<div class="nav-play-bar" id="bar-nav-play"></div>
						<span class="nav-play-time" id="nav-play-time">...</span>
					</div>
				</div>
			</div>
			<div class="nav-volume-control" style="width: 12rem;height: 100%;display: inline-block;vertical-align:middle">
				<div class="nav-vol-control-icon"></div>
    			<div class="nav-vol-control-body">
					<div class="nav-vol-control-bg" id="nav-vol-control-bg"></div>
					<div class="nav-vol-control-now" id="nav-vol-control-now"></div>
				</div>
            </div>
			<div style="height: 100%;display: inline-block;text-align: right;float: right; margin-right: 1rem">
				<div class="nav-btns">
					<a class="nav-btn nav-btn-list btn-scale" id="btn-nav-list"></a>
				</div>
			</div>
		</div>
		<div class="playlist" id="playlist" data-ui-on="false">
			<div class="playlist-title">
				<span>playlist</span>
				<span class="playlist-clear" id="btn-playlist-clear">Clear playlist</span>
			</div>
			<div class="playlist-list" id="playlist-list">
			</div>
		</div>
		<div id="app-index" style="display: none;">
			<div class="block" id="app-gallery" style="margin-top: 5rem;">
				<div>
					<div class="headline">Browse</div>
					<div class="left-link" id="index-btn-show-all-songs">all songs</div>
				</div>
				<div class="hr"></div>
				<div class="music-cards-list" id="index-music-cards-list">
				</div>
			</div>
			<div class="block" id="app-figures">
				<div>
					<div class="headline">VTuber</div>
					<div class="left-link" id="index-btn-show-all-figures">All VTuber</div>
				</div>
				<div class="hr"></div>
				<div class="figures-list" id="index-figures-list">
				</div>
			</div>
			<div class="block" id="app-alums">
				<div class="headline">Song Sheet</div>
				<div class="hr"></div>
				<div class="album-cards-list" id="index-alums-list">
					
				</div>
			</div>
		</div>
		<div id="app-bigplayer" class="app-bigplayer" style="display: none;">
			<div class="bigplayer-bg" style="background: url(./source/img/%E5%A4%8F%E8%89%B2%E7%A5%AD.jpg);">
			</div>
			<div class="bigplayer-lyric">
				<div style="position: relative;height: 100%;width: 100%">
					<div class="bigplayer-bar">
						<span class="bigplayer-btns">
							<a href="javascript:void(0);" id="bigplayer-btn-share">Share</a>
							<a href="" id="bigplayer-btn-download">Download</a>
						</span>
					</div>
					<div class="bigplayer-lyric-p" id="bigplayer-lyric-p">
					</div>
				</div>
			</div>
		</div>
	<div id="app-vocal" style="display: none;">
			<div class="vocal-body block">
				<div class="all-song-list-btn-back" btn-role="back">
					<div class="btn-back"></div>
				</div>
				<div class="all-song-list-btn-back" btn-role="back-home">
					<div class="btn-back-home"></div>
				</div>
				<div>
					<div class="vocal-img" style="background: url(./source/img/figure/夏色祭.png)" id="vocal-img"></div>
					<div class="vocal-info">
						<div class="vocal-info-text">
							<div class="vocal-name" id="vocal-name">夏色祭</div>
							<div class="vocal-name-jp" id="vocal-name-jp">夏色 まつり</div>
							<div class="vocal-links" id="vocal-links">
							</div>
							<div class="vocal-btn" id="vocal-btn-playlist-add-all" onclick="ui.song_list_add_all_songs('#app-vocal')">Add all to Playlist</div>
							<div class="vocal-btn" id="vocal-btn-play-all" onclick="ui.song_list_play_all_songs('#app-vocal')">Play all</div>
						</div>
						<div class="song-list" id="vocal-song-list">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="app-album" style="display: none;">
			<div class="vocal-body block">
				<div class="all-song-list-btn-back" btn-role="back">
					<div class="btn-back"></div>
				</div>
				<div class="all-song-list-btn-back" btn-role="back-home">
					<div class="btn-back-home"></div>
				</div>
				<div>
					<div class="vocal-img" style="background: url(./source/img/figure/夏色祭.png)" id="album-img"></div>
					<div class="vocal-info">
						<div class="vocal-info-text">
							<div class="vocal-name" id="album-name">夏色祭</div>
							<div class="vocal-name-jp" id="album-name-jp">夏色 まつり</div>
							<div class="vocal-btn" id="album-btn-playlist-add-all" onclick="ui.song_list_add_all_songs('#app-album')">Add all to Playlist</div>
							<div class="vocal-btn" id="album-btn-play-all" onclick="ui.song_list_play_all_songs('#app-album')">Play all</div>
						</div>
						<div class="song-list" id="album-song-list">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="app-all-songs" style="display: none">
			<div class="all-songs-body block">
				<div style="padding-bottom: 2rem;">
					<div>
						<div class="all-song-list-btn-back" btn-role="back">
							<div class="btn-back"></div>
						</div>
						<div class="all-song-list-btn-back" btn-role="back-home">
							<div class="btn-back-home"></div>
						</div>
						<div class="all-song-list-title">All songs</div>
					</div>
					<div style="margin-top: 1rem;">
						<input id="search-input" type="text" class="input" placeholder="Search (song name / vtube)" />
						<div class="vocal-btn" id="album-btn-playlist-add-all" onclick="ui.song_list_add_all_songs('#all-songs-music-cards-list')">Add all to Playlist</div>
						<div class="vocal-btn" id="album-btn-play-all" onclick="ui.song_list_play_all_songs('#all-songs-music-cards-list')">Play all</div>
					</div>
				</div>
				<div class="song-list" id="all-songs-music-cards-list">
					
				</div>
			</div>
		</div>
		<div id="app-all-figures" style="display: none">
			<div class="all-songs-body block">
				<div style="margin-bottom: 1rem;">
					<div class="all-song-list-btn-back" btn-role="back">
							<div class="btn-back"></div>
					</div>
					<div class="all-song-list-btn-back" btn-role="back-home">
						<div class="btn-back-home"></div>
					</div>
					<div class="all-song-list-title">All VTube</div>
				</div>
				<div id="all-figures-body">
				</div>
			</div>
		</div>
		<footer id="footer" class="footer">
			<div>
				<div>
				</div>
			</div>
			<div class="footer-block">
				<div style="padding-top: 1rem;">Vtb-Music</div>
				<div style="font-size: 0.7rem;">Currently  <span id="footer-song-cnt"></span> songs are included，<span id="footer-figure-cnt"></span> vtubers</div>
				<div style="font-size: 0.7rem; margin-top: 0.3rem; font-weight: bold;">All resources of this website are from the network. If there is any infringement, please contact us and we will delete it in time</div>
				<hr>
				<div class="footer-text-block">
					<span>Project deployed at<a href="https://gitee.com/santiego/vtb-music" target="_blank">Gitee</a>Welcome to participate in development</span>
					<span style="float: right">
						<a href="https://gitee.com/santiego/vtb-music/wikis/%E5%A6%82%E4%BD%95%E4%B8%8A%E4%BC%A0%E6%AD%8C%E6%9B%B2" target="_blank">Upload songs</a>
						<span class="divider"></span>
						<a href="https://gitee.com/santiego/vtb-music/tree/master#vtb-music" target="_blank"> About this website </a>
					</span>
				</div>
			</div>
		</footer>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	
	<script src="data.js?ver=20050401"></script>	
	<script src="app.js?ver=20050401"></script>
	<script src="ui.js?ver=20050401"></script>
	
	<!-- Data -->
	<script src="./template_en.js"></script>
	<script src="./source/data/figures.js"></script>
	<script src="./source/data/albums.js"></script>
		
	<!-- Plug -->
	<script src="./plug/js-cookie.js"></script>
	<script src="./plug/clipboard.min.js"></script>
	
	</body>
</html>